<template>
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
        </view>
      </view>
    </view>
		<view class="content-section">
		  <view class="mine-actions grid col-4 text-center">
		    <view class="action-item" @click="handleJiaoLiuQun" v-for="(dynamic, dynamicIndex) in preDynamicList" :key="dynamicIndex">
		      <view class="iconfont icon-friendfill text-pink icon"></view>
		      <text class="text">{{dynamic.title}}<uni-badge class="uni-badge-left-margin" :text="dynamic.allCount" :inverted="true"/></text>
		    </view>
		    <!-- <view class="action-item" @click="handleBuilding">
		      <view class="iconfont icon-service text-blue icon"></view>
		      <text class="text">在线客服</text>
		    </view>
		    <view class="action-item" @click="handleBuilding">
		      <view class="iconfont icon-community text-mauve icon"></view>
		      <text class="text">反馈社区</text>
		    </view>
		    <view class="action-item" @click="handleBuilding">
		      <view class="iconfont icon-dianzan text-green icon"></view>
		      <text class="text">点赞我们</text>
		    </view> -->
		  </view>
		
		  <view class="menu-list">
				<!-- 宫格组件 -->
				<uni-section title="我的待办" type="line"></uni-section>
				<view class="grid-body">
				  <uni-grid :column="4" :showBorder="false" @change="change">
				    <uni-grid-item v-for="(listItem,listIndex) in waitList" :index="listIndex"
								customStyle="padding-top: 10px; padding-bottom: 10px">
								
				      <view class="grid-item-box">
				        <uni-icons type="person-filled" size="30"></uni-icons>
				        <text class="text">{{listItem.title}}<uni-badge class="uni-badge-left-margin" :text="listItem.waitCount" /></text>
				      </view>
				    </uni-grid-item>
				  </uni-grid>
					
					<!-- 宫格组件 -->
					<uni-section title="业务查询" type="line"></uni-section>
					<view class="grid-body">
					  <uni-grid :column="4" :showBorder="false" @change="changeGrid">
					    <uni-grid-item :index="0">
					      <view class="grid-item-box">
					        <uni-icons type="staff-filled" size="30"></uni-icons>
					        <text class="text">我的办件</text>
					      </view>
					    </uni-grid-item>
					    <uni-grid-item :index="1">
					      <view class="grid-item-box">
					        <uni-icons type="settings-filled" size="30"></uni-icons>
					        <text class="text">部门办件</text>
					      </view>
					    </uni-grid-item>
							<uni-grid-item :index="2">
							  <view class="grid-item-box">
							    <uni-icons type="heart-filled" size="30"></uni-icons>
							    <text class="text">所有办件</text>
							  </view>
							</uni-grid-item>
							<uni-grid-item :index="3">
							  <view class="grid-item-box">
							    <uni-icons type="color" size="30"></uni-icons>
							    <text class="text">方案查询</text>
							  </view>
							</uni-grid-item>
					  </uni-grid>
						</view>
		  </view>
			
		</view>
    
    </view>
  </view>
</template>

<script>
	import { listCount, center } from '@/api/business/workbench.js'
  export default {
    data() {
      return {
				name: this.$store.state.user.nickName,
				deptName: this.$store.state.user.deptName,
				roleName: this.$store.state.user.roleName,
				version: getApp().globalData.config.appInfo.version,
				avatar: this.$store.state.user.avatar,
        current: 0,
        swiperDotIndex: 0,
				waitList: [],
				preDynamicList: []
      }
    },
		created() {
			this.getListCount()
			this.getPreDynamic()
		},
    methods: {
			// 获取我的待办列表
			getListCount() {
				listCount().then(res => {
					this.waitList=res.rows
				})
			},
			getPreDynamic() {
				center({}).then(res => {
					res.rows.forEach(item => {
						if (item.title == '今日申请') {
							item.icon = 'lastMonth'
							item.background = '#FFAB49'
						} else if (item.title == '今日办结') {
							item.icon = 'todayEnd'
							item.background = '#79C445'
						}else if (item.title == '本周申请') {
							item.icon = 'lastMonth'
							item.background = '#FFD700'
						}else if (item.title == '本周办结') {
							item.icon = 'todayEnd'
							item.background = '#73B9BC'
						} else if (item.title == '本月申请') {
							item.icon = 'localMonth'
							item.background = '#1A83DE'
						} else if (item.title == '本月办结') {
							item.icon = 'monthEnd'
							item.background = '#F86949'
						} else if (item.title == '本年申请') {
							item.icon = 'localYear'
							item.background = '#8069C1'
						} else if (item.title == '本年办结') {
							item.icon = 'yearEnd'
							item.background = '#2EA850'
						}
					})
					this.preDynamicList = res.rows.reverse()
				})
			},
			handleToPageMy() {
			  this.$tab.navigateTo('/pages/business/pageMy/index')
			},
      clickBannerItem(item) {
        console.info(item)
      },
      changeSwiper(e) {
        this.current = e.detail.current
      },
      changeGrid(e) {
				let {
					index
				} = e.detail
				if(index==0){
					this.handleToPageMy()
				}else{
					this.$modal.showToast('模块建设中~')
				}
      },
			change(e) {
				let {
					index
				} = e.detail
				this.$modal.showToast(this.waitList[index].title+'模块建设中~')
			},
    }
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    ;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 150px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
	
	page {
	  background-color: #f5f6f7;
	}
	
	.mine-container {
	  width: 100%;
	  height: 100%;
	
	
	  .header-section {
	    padding: 15px 15px 45px 15px;
	    background-color: #3c96f3;
	    color: white;
	
	    .login-tip {
	      font-size: 18px;
	      margin-left: 10px;
	    }
	
	    .cu-avatar {
	      border: 2px solid #eaeaea;
	
	      .icon {
	        font-size: 40px;
	      }
	    }
	
	    .user-info {
	      margin-left: 15px;
	
	      .u_title {
	        font-size: 18px;
	        line-height: 30px;
	      }
	    }
	  }
	
	  .content-section {
	    position: relative;
	    top: -50px;
	
	    .mine-actions {
	      margin: 15px 15px;
	      padding: 20px 0px;
	      border-radius: 8px;
	      background-color: white;
	
	      .action-item {
	        .icon {
	          font-size: 28px;
	        }
	
	        .text {
	          display: block;
	          font-size: 13px;
	          margin: 8px 0px;
	        }
	      }
	    }
	  }
	}
</style>